import React, { Component } from "react";
import GotService from "../../services/gotService";
import Spinner from "../spinner/spinner";
import ErrorMessage from "../errorMessage/errorMessage";
import "./randomChar.css";

export default class RandomChar extends Component {

    GotService = new GotService();
    state = {
        char: {},
        loading: true,
        error: false,
    };

    //функционал хуков жизненного цикла компонентов
    //хук появления компонента на странице
    componentDidMount() {
        this.updateChar();
        this.timerId = setInterval(this.updateChar, 20000);
    }

    //хук удаления компонента со страницы
    componentWillUnmount() {
        clearInterval(this.timerId);
    }


    onCharLoaded = (char) => {
        this.setState({
            char,
            loading: false,
        });
    };

    onError = (err) => {
        this.setState({
            error: true,
            loading: false,
        });
    };

    //при загрузке персонажа каждый раз будет вызываться эта функция
    //и с Api наш gotService по id будем обновлять состяние-state
    //персонажа и его характеристики

    updateChar = () => {
        const id = Math.floor(Math.random() * 140 + 25); //рандомный диапазон персонажей 25-140
        // let id = 130000;
        this.GotService
            .getCharacter(id)
            .then(this.onCharLoaded)
            .catch(this.onError);
    };

    render() {
        const { char, loading, error } = this.state;

        const errorMessage = error ? <ErrorMessage /> : null;
        //пока loading=true то есть компонент загружается ставим spinner  loading=false грузим наш компонент View
        const spinner = loading ? <Spinner /> : null;
        const content = !(loading || error) ? <View char={char} /> : null;

        return (
            <div className="random-block rounded">
                {errorMessage}
                {spinner}
                {content}
            </div>
        );
    }
}

//локальный компонент
const View = (props) => {
    //-------использование нашего состяния-state------
    const { name, gender, born, died, culture } = props.char;

    return (
        <>
            <h4>Random Character: {name}</h4>
            <ul className="list-group list-group-flush">
                <li className="list-group-item d-flex justify-content-between">
                    <span className="term">Gender </span>
                    <span>{gender}</span>
                </li>
                <li className="list-group-item d-flex justify-content-between">
                    <span className="term">Born </span>
                    <span>{born}</span>
                </li>
                <li className="list-group-item d-flex justify-content-between">
                    <span className="term">Died </span>
                    <span>{died}</span>
                </li>
                <li className="list-group-item d-flex justify-content-between">
                    <span className="term">Culture </span>
                    <span>{culture}</span>
                </li>
            </ul>
        </>
    );
};

//-- ----------------Работа элемента------------------
//1. Когда будет создан классовый элемент RandomChar
//2. Будет вызван его метод this.updateChar() через конструктор
// constructor() {
//     super();
//     this.updateChar();
// }
//3. Дальше метод идет по своему телу и инициализиует id
//4. Запусает gotService gjkexfz персонажа по его id;
//5. Вписывает данные персонажа в state
//6. Когда state получен null поменяются в state и компонент перересуется
